<template>
  <div id="app">

    <div id="context">
      <div id="headLogo"><span>登录</span>
      </div>
      <!-- <h1>{{$t('label.sysName')}}</h1> -->
      <el-form :model="loginForm" ref="loginForm" :label-position="loginFormPosition" status-icon :rules="loginFormRules" @keyup.enter.native="onlogin">
        <el-form-item prop="loginName">
          <el-input v-model.trim="loginForm.loginName" maxlength="20" :placeholder="$t('ph.userNameTip')">
            <template slot="prepend">
              <i class="fa fa-user"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input v-model.trim="loginForm.pwd" maxlength="20" type="password" :placeholder="$t('ph.pwdTip')">
            <template slot="prepend">
              <i class="fa fa-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="language">
          <el-select @change="languageChange" v-model="loginForm.language" style="width:100%">
            <el-option :label="$t('label.CN_label')" value="cn"></el-option>
            <el-option :label="$t('label.EN_label')" value="en"></el-option>
          </el-select>
        </el-form-item>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="login" @click="onlogin" :loading="loading">{{ $t('btnText.loginBtnText') }}</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: 'login',
  data: function() {
    return {
      loading: false,
      // 登录表格绑定的对象
      loginForm: {
        pwd: '',
        loginName: '',
        appType: 'Web',
        deviceID: '',
        language: 'cn',
        checkType: '1'
      },
      // 登录表格标签宽度
      loginFormLabelWidth: '75px',
      // 登录表格标签对齐方式
      loginFormPosition: 'right', // top left right
      // 登录表格的验证规则
      loginFormRules: {
        loginName: [
          {
            required: true,
            message: this.$i18n.t('rules.login.Name'),
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: this.$i18n.t('rules.login.Pwd'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    languageChange: function languageChange(selectVal) {
      this.$i18n.locale = selectVal
      // this.copyright = this.$i18n.t('label.copyright');
      this.loginFormRules.loginName[0].message = this.$i18n.t('rules.login.Name')
      this.loginFormRules.pwd[0].message = this.$i18n.t('rules.login.Pwd')
      this.$refs['loginForm'].clearValidate()
      document.title = this.$i18n.t('label.logo')
    },
    // 提交编辑面板数据
    onlogin: function onlogin() {
      var _this = this
      this.$refs['loginForm'].validate(function(valid) {
        if (valid) {
          var logoCode = _this.logo(_this.loginForm, _this.logoCallBack)
        } else {
          return false
        }
      })
    },
    logoCallBack: function(isSuccess, json) {
      if (isSuccess) {
        this.$message({
          message: this.$i18n.t('message.successTip'),
          type: 'success'
        })
        window.location.href = 'index.html'
      } else {
        this.$message({
          message: this.$i18n.t('errorCode.' + json.reason, json.message),
          type: 'warning'
        })
      }
    }
  },
  mounted: function mounted() {
    document.title = this.$i18n.t('label.logo')
  }
}
</script>

<style scoped>
#app {
  margin: 0px;
  height: 100%;
  background-image: url(../assets/loginbg.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
#headLogo {
  height: 66px;
  width: 100%;
  background-image: url(../assets/AMS媒资管理系统@2x.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  border-bottom: 1px dashed #185b87;
}
#context {
  margin: 0px;
  width: 640px;
  height: 370px;
  border-radius: 15px;
  overflow: hidden;
  background: white;
  /*background: red;*/
  position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -230px;
            margin-top: -230px; */
  transform: translate(-50%, -50%);
  /* padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px; */
  border: 0px solid #333;
  text-align: center;
  background-image: url(../assets/loginrect.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
.logo {
  width: 45%;
  height: 303px;
  float: left;
  background: url(../assets/logo@2x.png) no-repeat center;
}

.el-form {
  width: 85%;
  float: right;
  height: 303px;
  padding: 30px 100px 30px 0;
  box-sizing: border-box;
}
.el-form >>> .el-form-item {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #878889;
  height: 37px;
  box-sizing: border-box;
}
.el-form >>> .el-form-item:last-of-type {
  border: none;
}
.el-form >>> .el-form-item__content {
  line-height: 35px;
  height: 35px;
}
.el-form >>> .el-form-item__content input.el-input__inner {
  border: none;
  height: 35px;
}
.el-form >>> .el-input-group__prepend {
  border: none;
}
.el-form-item__error {
  color: white !important;
}

.el-form-item__label {
  color: white !important;
}

.el-button--login {
  /* background-image: url(../assets/loginbuttonbg.png); */
  color: white;
  background-color: #145886;
  border-color: #0f38ab;
  border-width: 0;
  width: 100%;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
</style>
